<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>ScatterplotMatrix</title>
    <style type="text/css"></style>
  </head>
  <body>
    <script type="text/javascript" src="../../deps/d3.js"></script>
    <script type="text/javascript" src="../../deps/raphael.js"></script>
    <script type="text/javascript" src="../../deps/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../deps/seajs/sea.js"></script>
    <script type="text/javascript">
	    seajs.config({
	        alias: {
	            'datav': '/DataVisual/resources/datavjs/datav.js',
	            'scatterplotMatrix': '/DataVisual/resources/datavjs/libs/scatterplotMatrix.js'
	        }
	    });
    </script>

    <div id="chart"></div>
    <script type="text/javascript">

    seajs.use(["datav", "scatterplotMatrix"], function (DataV, ScatterplotMatrix) {
        var scatterplotMatrix = new ScatterplotMatrix("chart", {"width": 800, "height": 600, "margin": 50, "typeName": "Species", "tagDimen": "Petal.Length"});
        DataV.csv("iris.csv", function(dataSource) {
            scatterplotMatrix.setSource(dataSource);
            scatterplotMatrix.setDimensionsX(["Sepal.Length", "Sepal.Width", "Petal.Length","Petal.Width"]);
            scatterplotMatrix.setDimensionsY(["Sepal.Length", "Sepal.Width", "Petal.Length","Petal.Width"]);
            scatterplotMatrix.setTypeName(["聚类簇1","聚类簇2","聚类簇3","聚类簇4","聚类簇5","聚类簇6","聚类簇7"]);
            scatterplotMatrix.render();
        });
    });

    </script>
  </body>
</html>
